{extend name="public:base" /}

{block name="css"}
<style>
  .set-active {
    border-top: 2px solid rgb(119, 216, 6);
    border-bottom: 1px solid rgb(240, 240, 241);
    border-left: 1px solid rgb(217, 217, 217);
    border-right: 1px solid rgb(217, 217, 217);
    color: rgb(119, 216, 6);
  }

  .set-border-bottom {
    border-bottom: 1px solid rgb(217, 217, 217);
    margin-top: -1px;
    margin-bottom: 20px;
  }

  li {
    font-weight: 600;
    display: block;
  }
</style>
{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <a type="button" class="btn btn-primary btn-lg" href="{:url('doConfig')}">新增配置</a>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">排序</button>
                </div>

                <div class="ibox-content">
                    <ul class="nav navbar-nav mr-auto block conf-menu">
                        {volist name=":cache('configGroup')" id="vo"}
                        <li style="float: left; font-size: 18px; font-weight: bold; margin-top: 2px;" class="{if ($id == $vo['id'])}set-active{/if}">
                            <a href="{:url('setConfig', ['id' => $vo['id']])}">{$vo.name}</a></li>
                        {/volist}
                    </ul>
                    <div style="clear: both"></div>
                    <div class="set-border-bottom"></div>

                    <form method="get">
                        {volist name=":cache('systemConfig')" id="vo"}
                        {if ($id == $vo['group_id'])}
                        {if ($vo['type'] == 1)}
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">{$vo.title}</label>
                                <div class="col-sm-2">
                                    <input name="{$vo.id}" type="text" class="form-control" value="{$vo.value}">
                                </div>
                                <a href="{:url('doConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm" style="margin-right: 10px; height: 36px;"><i class="iconfont icon-pencil-square"></i></a>
                                <a href="{:url('delConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm ajax-del" style="height: 36px;"><i class="iconfont icon-trash"></i></a>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        {elseif ($vo['type'] == 2)}
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">{$vo.title}</label>
                                <div class="col-sm-3">
                                    <input type="number" name="{$vo.id}" class="form-control" value="{$vo.value}">
                                </div>
                                <a href="{:url('doConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm" style="margin-right: 10px; height: 36px;"><i class="iconfont icon-pencil-square"></i></a>
                                <a href="{:url('delConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm ajax-del" style="height: 36px;"><i class="iconfont icon-trash"></i></a>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        {elseif ($vo['type'] == 3 || $vo['type'] == 4)}
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">{$vo.title}</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="{$vo.id}" rows="8">{$vo.value}</textarea>
                                    <span class="form-text m-b-none">多个配置值请使用指定四种分隔符进行分隔（<span style="color: red">,  ，  ;  换行</span>）</span>
                                </div>
                                <a href="{:url('doConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm" style="margin-right: 10px; height: 36px;"><i class="iconfont icon-pencil-square"></i></a>
                                <a href="{:url('delConfig', ['id' => $vo['id']])}" class="btn btn-white btn-sm ajax-del" style="height: 36px;"><i class="iconfont icon-trash"></i></a>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        {/if}
                        {/if}
                        {/volist}

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">排序</h4>
            </div>
            <div class="modal-body">
                <div id="list">
                    {volist name=":cache('systemConfig')" id="vo"}
                    {if ($id == $vo['group_id'])}
                    <div data-id="{$vo.id}">{$vo.title}</div>
                    {/if}
                    {/volist}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveSort()">更新排序</button>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script src="__ADMIN__/js/Sortable.js"></script>
<script>
    (function () {
        //文字拖拽
        Sortable.create(document.getElementById('list'), {
            animation: 150,
            //onAdd,onUpdate,onRemove,onStart,onSort,onEnd
            onUpdate: function (evt) {
                var oldIndex = evt.oldIndex;
                var newIndex = evt.newIndex;
                console.log(oldIndex);
                console.log(newIndex)
            }
        });
    })();

    $('.conf-menu > li').click(function () {
        $('.conf-menu > li').removeClass();
        $(this).addClass('set-active')
    })

    /**
     * 更新排序
     * */
    function saveSort() {
        var divObj = $('#list > div');
        if (divObj.length > 0) {
            var sortObj = [];
            divObj.each(function (index, val) {
                var id = val.dataset.id;

                var sortObjSingle = {};
                sortObjSingle.id = id;
                sortObjSingle.sort = index;
                sortObj[index] = sortObjSingle;
            })
            var url = "/admin/system/saveConfigSort";

            $.post(url, {
                sortObj: JSON.stringify(sortObj)
            }, function (res) {
                if (res.result == 1) {
                    layer.msg(res.msg);
                    setTimeout(function () {
                        window.location.href = window.location.href
                    }, res.timer)
                } else {
                    layer.msg(res.msg)
                }
            }, 'json')
        }
    }
</script>
{/block}